<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import {
    deleteOrderApi, queryOrderListApi,
    uploadOrderFileApi
} from '../../../common/service/api/orderApi'
import { usePopWinProvide } from '../../../common/hooks/FormHooks'
import OrderCreate from './comps/OrderCreate.vue'
import { sendServiceData } from '../../../common/service'
import { dateFormatStr, popMessage } from '../../../common/utils/normalUtils'

// 状态
const state:any = reactive({
    search: {
        name: '',
        date: []
    },
    resultParams: null,
    isPopResult: false
})

/**
 *
 */
const { popState, actions, pageData, pageActions } = usePopWinProvide({
    queryMethod: queryOrderListApi,
    deleteMethod: deleteOrderApi,
    page: true
})

/**
 * 查询接口参数处理
 */
actions.queryList = async () => {
    const search = state.search
    const send:any = {
        memberName: search.name
    }
    if (search.date && search.date.length === 2) {
        send.orderPayTimeStart = dateFormatStr(search.date[0])
        send.orderPayTimeEnd = dateFormatStr(search.date[1])
    }
    await pageActions.queryList(send)
}

/**
 * 上传文件
 */
const uploadFileHandler = async (file:any) => {
    if (!file.raw) return
    await sendServiceData(uploadOrderFileApi, { file: file.raw })
    popMessage('上传成功！')
    await actions.queryList()
}

/**
 * 初始化
 */
onMounted(() => {
    actions.queryList()
})
</script>


<template>
  <v-page-list class="share-data" :loading="pageData.isLoading"
               :page-data="pageData"
               @query="actions.queryList()"
               @page-query="pageActions.pageChange()">
    <template #search>
      <div class="form-item0">
        <v-search-input v-model="state.search.name"
                        class="data-search"
                        placeholder="请输入买家名称"
                        normal @enter="actions.queryList()" />
      </div>

      <div class="form-item1">
        <el-date-picker v-model="state.search.date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间" />
      </div>
      <v-button type="primary"
                icon="sousuo"
                @click="actions.queryList()">
        查询
      </v-button>

    </template>

    <template #control>
      <el-upload :auto-upload="false"
                 :show-file-list="false"
                 accept=".xlsx,.xls"
                 :limit="100000"
                 :on-change="uploadFileHandler">
        <template #trigger>
          <v-button icon="shangchuan-copy"
                    class="gap-btn">
            导入文件
          </v-button>
        </template>
      </el-upload>
      <v-button type="success"
                icon="tianjia2"
                @click="actions.popCreate()">
        添加
      </v-button>
      <v-button type="danger"
                icon="shanchu"
                :disabled="!popState.checkDataSource || popState.checkDataSource.length==0"
                @click="actions.deleteItems()">
        删除
      </v-button>
    </template>

    <el-table :data="pageData.dataSource"
              height="100%"
              style="width:100%;height:100%;"
              border
              highlight-current-row
              @selection-change="actions.checkDataHandler">
      <el-table-column type="selection" width="50" />
      <el-table-column prop="memberName" label="买家名称" show-overflow-tooltip width="200" />
      <el-table-column prop="productName" label="商品标题" show-overflow-tooltip />
      <el-table-column prop="number" label="订单数量" show-overflow-tooltip width="90" />
      <el-table-column prop="price" label="订单金额" show-overflow-tooltip width="90" />
      <el-table-column prop="unit" label="单位" show-overflow-tooltip width="90" />
      <el-table-column prop="orderStatus" label="订单状态" show-overflow-tooltip width="90" />
      <el-table-column prop="orderPayTime" label="订单时间" show-overflow-tooltip width="170" />
      <el-table-column prop="opt" label="操作" align="center" width="120">
        <template #default="{row}">
          <div class="col-btn-box">
            <v-icon button icon="xiugai"
                    title="编辑"
                    class="icon-btn-tb"
                    @click="actions.popEdit(row)" />
            <v-icon button danger
                    icon="shanchu"
                    title="删除"
                    class="icon-btn-tb"
                    @click="actions.deleteItem(row)" />
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!--创建修改窗口-->
    <order-create v-if="popState.isPop" />

  </v-page-list>
</template>

<style scoped lang="scss">
.form-item0{
  flex:none;
  margin-right: 10px;
}
.form-item1{
  flex:none;
  margin-right: 10px;
}

.gap-btn{
  margin-left: 12px;
  margin-right: 12px;
}

.col-btn-box{
  @include hor-group(center) ;
  flex:none;
  width:100%;
  .icon-btn-tb {
    font-size:18px;
    padding: 0 5px;
    box-sizing: border-box;
    &:hover{
      color:$f-color-light;
    }
  }
}

</style>
